<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品评价 - 超市系统</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/review.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="/js/jquery-1.12.4.min.js"></script>
    <script src="js/vue.js"></script>
    <link rel="icon" href="/photo/Profile picture/log.ico" type="image/x-icon">
</head>

<body>
    <div id="app">
        <main class="review-container">
            <div class="product-info-card">
                <div class="product-image-area">
                    <img :src="product.imageUrl" :alt="product.name" class="product-main-image">
                </div>
                <div class="product-details-area">
                    <h2 class="product-title">{{ product.name }}</h2>
                    <div class="product-price-info">
                        <span class="price-label">价格</span>
                        <span class="product-price">¥{{ product.price.toFixed(2) }}</span>
                    </div>
                    <div class="product-delivery-info">
                        <span class="delivery-label">配送</span>
                        <span class="delivery-cost">¥0.00</span>
                    </div>
                    <div class="product-rating-info">
                        <span class="rating-label">评价</span>
                        <div class="stars product-stars">
                            <i v-for="n in 5" :key="n"
                                :class="['fas fa-star', { 'filled': n <= product.averageRating }]"></i>
                        </div>
                        <span class="product-rating">{{ averageRating }}分 (累计评价 {{ allReviews.length }}
                            )</span>
                    </div>
                </div>
            </div>

            <div class="review-section">
                <h3 class="section-title">累计评价 {{ allReviews.length }}</h3>
                <div class="rating-summary">
                    <span class="rating-score">点击星星评价</span>
                    <span class="score-value">{{ selectedRating > 0 ? selectedRating : product.averageRating }}</span>
                    <div class="stars editable-stars" @mouseleave="resetHover">
                        <i v-for="n in 5" :key="n"
                            :class="['fas fa-star', { 'filled': (hoverRating > 0 ? n <= hoverRating : n <= selectedRating) }]"
                            @click="setRating(n)" @mouseover="hoverStars(n)"></i>
                    </div>
                </div>

                <div class="write-review-area">
                    <p class="review-prompt">
                        <i class="fas fa-lightbulb"></i> 其他买家，需要你的建议哦！
                    </p>
                    <p class="review-sub-prompt">
                        初次评价：未写评论。可以在下面补充哦~
                    </p>
                    <div class="review-form-group">
                        <label for="reviewContent">使用感受：</label>
                        <textarea id="reviewContent" v-model="reviewContent" rows="8"
                            placeholder="请输入您的评论..."></textarea>
                    </div>
                    <div class="review-actions">
                        <div class="anonymous-checkbox">
                            <input type="checkbox" id="anonymousReview" v-model="isAnonymous" :true-value="1"
                                :false-value="0">
                            <label for="anonymousReview">匿名评价</label>
                        </div>
                        <button class="btn-upload-image" @click="triggerFileInput"><i class="fas fa-camera"></i> 图片上传 ({{ selectedImages.length }}/5)</button>
                        <input type="file" ref="imageInput" @change="handleImageUpload" multiple accept="image/*" style="display: none;">
                        <button class="btn-preview-images"  v-if="showImagePreviews && imagePreviews.length > 0" @click="showImagePreviews = !showImagePreviews">
                            <i class="fas fa-eye"></i> {{ showImagePreviews ? '隐藏预览' : '预览图片' }}
                        </button>
                        <button class="btn-submit-review" @click="submitReview">提交评论</button>
                    </div>
                    <!-- 图片预览区域 -->
                    <div class="image-previews" v-if="imagePreviews.length > 0">
                        <div class="preview-item" v-for="(image, index) in imagePreviews" :key="index">
                            <img :src="image" alt="图片预览" class="thumbnail">
                            <button class="remove-image" @click="removeImage(index)">&times;</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 全部评论显示区域 -->
            <div class="all-reviews-section">
                <h3 class="section-title">全部评论 ({{ allReviews.length }})</h3>
                <div v-if="allReviews.length > 0" class="reviews-list">
                    <div class="review-item" v-for="review in allReviews" :key="review.id">
                        <div class="reviewer-info">
                            <div class="user-avatar">
                                <div v-if="review.isAnonymous!=0" class="initials">{{ getInitials(review.username )
                                    }}</div>
                                <img v-else :src="review.userAvatar" :alt="review.username">
                            </div>

                            <span class="reviewer-name">{{ review.username }}</span>
                            <span class="review-date">{{ review.reviewDate }}</span>
                        </div>
                        <p class="review-content">{{ review.content }}</p>
                        <!-- 如果有图片，可以这里显示 -->
                        <div class="review-images" v-if="review.images && review.images.length > 0">
                            <img v-for="img in review.images" :src="img" alt="评论图片" class="review-image-thumbnail">
                        </div>
                    </div>
                </div>
                <div v-else class="no-reviews-message">
                    <p>暂无评论</p>
                </div>
            </div>
        </main>
    </div>

    <script src="js/revview.js"></script>
</body>

</html>